<template>
	<view>
		<scroll-view style="width: 730rpx; height: 100%">
			<u-table
				:style="{ width: scroll.X, height: scroll.Y }"
				:class="className"
				class="mb34"
				:font-size="20"
				border-color="rgba(101, 101, 101, 0.1)"
			>
				<u-tr class="u-tr">
					<u-th
						class="u-th"
						:style="{ width: item.width ? item.width : 'auto', flex: item.width ? 'inherit' : 1 }"
						:class="{ 'active-th': sortKey == item.key }"
						v-for="(item, index) in columns"
						:key="item.key"
					>
						<view @click.stop="changeSort(item)">{{ item.title }}</view></u-th
					>
				</u-tr>
				<view :style="{ width: '100%', height: heightSv }" class="table-view-height-sv">
					<u-empty text="暂无数据" v-if="datas.length == 0"></u-empty>

					<u-tr class="u-tr" v-for="(item, index) in displayedItems" :key="item.id">
						<view class="u-tr-box" @click.stop="customRow(item)">
							<u-td
								class="u-td"
								:style="{ width: t.width ? t.width : 'auto', flex: t.width ? 'inherit' : 1 }"
								v-for="(t, i) in columns"
								:key="i"
							>
								<template v-if="t.slotKey">
									<slot :name="t.slotKey" :data="item"></slot>
								</template>
								<template v-else>
									{{ item[t.key] || '-' }}
								</template>
							</u-td>
						</view>
					</u-tr>
				</view>
				<view class="pagination-page-table">
					<u-button size="mini" type="primary" @click="previousPage" :disabled="currentPage === 1">上一页</u-button>
					<text class="page-font">{{ currentPage }}/{{ totalPages }}</text>
					<u-button size="mini" type="primary" @click="nextPage" :disabled="currentPage === totalPages"
						>下一页</u-button
					>
				</view>
			</u-table>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'wrapper',
		props: {
			columns: {
				type: Array,
				default: []
			},
			datas: {
				type: Array,
				default: []
			},
			className: {
				type: String,
				default: 'my-table'
			},
			sortKey: {
				type: String,
				default: ''
			},
			heightSv: {
				type: null,
				default: () => '100%'
			},
			scroll: {
				type: Object,
				default: () => {
					return {
						X: '100%',
						Y: 'auto'
					}
				}
			},
			pageSize: {
				type: Number,
				default: () => 20
			}
		},
		components: {},
		computed: {
			totalPages() {
				return Math.ceil(this.datas.length / this.pageSize)
			},
			displayedItems() {
				const startIndex = (this.currentPage - 1) * this.pageSize
				const endIndex = startIndex + this.pageSize
				return this.datas.slice(startIndex, endIndex)
			}
		},
		data() {
			return {
				// pageSize: 20,
				currentPage: 1
			}
		},
		watch: {
			datas() {
				this.currentPage = 1
			}
		},
		methods: {
			// 点击头部排序
			changeSort(item) {
				if (!item.isClick) return
				this.$emit('changeSort', item)
			},
			// 点击行
			customRow(item) {
				this.$emit('customRow', item)
			},
			previousPage() {
				if (this.currentPage > 1) {
					this.currentPage--
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPages) {
					this.currentPage++
				}
			}
		},
		mounted() {}
	}
</script>
<style lang="less" scoped>
	.u-table {
		border-radius: 10px;
		border: 1px solid rgba(240, 249, 255, 1);
		font-size: 20rpx;
	}
	.u-tr-box {
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.u-tr:nth-of-type(2n + 1) {
		background-color: #f0f9ff !important;
	}

	.u-th {
		flex: auto;
		font-weight: normal;
		width: 96rpx;
		height: 70rpx;
		border-bottom: 1px solid transparent !important;
		background-color: transparent;
		font-size: 20rpx;
	}

	.u-td {
		width: 96rpx;
		white-space: wrap;

		word-break: break-all;
		border-bottom: 1px solid transparent !important;
		// height: 70rpx;
	}
	.active-th {
		background: rgba(0, 148, 255, 0.8);
		color: #fff;
	}

	.pagination-page-table {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
		.page-font {
			margin: 0 45rpx;
		}
	}
</style>
